<div class="col-12 center buttons">
  <div class="col-24">
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="tl">TL</div>
    </ma-button>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="tc">TC</div>
    </ma-button>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="tr">TR</div>
    </ma-button>
  </div>
  <div class="col-12">
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="lt">LT</div>
    </ma-button>
    <br/>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="lc">LC</div>
    </ma-button>
    <br/>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="lb">LB</div>
    </ma-button>
  </div>
  <div class="col-12">
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="rt">RT</div>
    </ma-button>
    <br/>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="rc">RC</div>
    </ma-button>
    <br/>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="rb">RB</div>
    </ma-button>
  </div>
  <div class="col-24">
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="bl">BL</div>
    </ma-button>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="bc">BC</div>
    </ma-button>
    <ma-button>
      <div ma-tooltip="{{tipText}}"
        ma-direction="br">BR</div>
    </ma-button>
  </div>
</div>
